<script setup lang="ts">
import { AlgoTypeEnum } from "@/constants/other-keys"
import { useQuickStartStore } from "@/store/modules/quick-start"
import { MLTrain, RLTrain } from "./component"
import { computed } from "vue"

defineOptions({
  // 命名当前组件
  name: "QuickStart"
})

const store = useQuickStartStore()
const selectWork = (item: AlgoTypeEnum) => {
  store.setServiceType(item)
}
const serviceType = computed(() => {
  return store.getServiceType()
})
</script>
<template>
  <div v-if="serviceType == null" class="app-container">
    <el-row>
      <el-card shadow="never" style="width: 100%" body-class="quick-card">
        <span>请选择您的业务</span>
      </el-card>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card shadow="hover" class="RL" style="width: 100%" @click="selectWork(AlgoTypeEnum.RL)">
          <span>强化学习</span>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover" class="ML" style="width: 100%" @click="selectWork(AlgoTypeEnum.ML)">
          <span>深度学习</span>
        </el-card>
      </el-col>
    </el-row>
  </div>
  <MLTrain v-else-if="serviceType == AlgoTypeEnum.ML" />
  <RLTrain v-else-if="serviceType == AlgoTypeEnum.RL" />
</template>
<style lang="scss" scoped>
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
:deep(.quick-card) {
  width: 100%;
  height: calc(20vh);
  display: flex;
  align-items: center;
  justify-content: center;
  span {
    font-size: 3em;
    letter-spacing: 5px;
  }
}
:deep(.el-card.is-hover-shadow) {
  height: calc(60vh);
  display: flex;
  align-items: center;
  justify-content: center;
  &:hover {
    box-shadow:
      0px 24px 72px 24px rgba(5, 101, 255, 0.12),
      0px 18px 48px rgba(80, 97, 253, 0.16),
      0px 12px 24px -4px rgba(255, 255, 255, 0.24);
    cursor: pointer;
  }
  span {
    font-size: 5em;
    color: white;
  }
}
.el-card.RL {
  background-image: linear-gradient(to bottom, rgba(98, 255, 0, 0.1), rgba(0, 94, 255, 0.5)),
    url("@/assets/quickstart/RL.png");
  background-size: 100% 100%;
}
.el-card.ML {
  background-image: linear-gradient(to bottom, rgba(94, 255, 1, 0.1), rgba(0, 94, 255, 0.5)),
    url("@/assets/quickstart/ML-.png");
  background-size: 100% 100%;
}
</style>
